<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>test</title>
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <link href="./layui/css/layui.css" rel="stylesheet" />

    <style>
        ol li a {
            background-color: rgba(0,0,0,1) !important;
        }

        .three_this {
            background-color: #808080 !important;
        }
    </style>
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">layui 后台布局</div>
            <ul class="layui-nav layui-layout-left" lay-filter="" id="layuiHeader">
                <li class="layui-nav-item"><a href="">最新活动</a></li>
                <li class="layui-nav-item layui-this"><a href="">产品</a></li>
                <li class="layui-nav-item"><a href="">大数据</a></li>
                <li class="layui-nav-item"><a href="javascript:;">解决方案</a></li>
                <li class="layui-nav-item"><a href="">社区</a></li>
            </ul>


            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a href="">退出</a></li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="test" id="menu">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">所有商品</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;" class="menu_three ">列表一</a>
                                <ol class="layui-nav-child" style="display: none;">
                                    <li><a href="javascript:;">三级列表一</a></li>
                                    <li><a href="javascript:;">三级列表二</a></li>
                                    <li><a href="javascript:;">三级列表三</a></li>
                                </ol>
                            </dd>
                            <dd><a href="javascript:;" class="menu_three">列表二</a>
                                <ol class="layui-nav-child" style="display: none;">
                                    <li><a href="javascript:;">三级列表一</a></li>
                                    <li><a href="javascript:;">三级列表二</a></li>
                                    <li><a href="javascript:;">三级列表三</a></li>
                                </ol>
                            </dd>
                            <dd><a href="javascript:;">列表三</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="#">云市场</a></li>
                    <li class="layui-nav-item"><a href="#">发布商品</a></li>
                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">内容主体区域</div>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © layui.com - 底部固定区域
        </div>
    </div>
    <script src="./layui/layui.js"></script>
    <script src="./jquery-3.4.1.min.js"></script>
</body>
</html>
<script>
    $(function() {
        // 获取本地json文件
        $.ajax({
            type: 'get',
            url: 'treeTab.json',
            dataType: 'json',
            success: function(res) {
                $("#menu").html('')
                layui.use('element', function () {
                    element = layui.element;
                    console.log(res)
                    let header = '';
                    res.forEach( v => {
                        header += `
                            <li class="layui-nav-item" id="header_${v.id}"><a href="javascript:;">${v.res_name}</a></li>
                        `
                        var content = '<li class="layui-nav-item">';
                        content += '<a href="javascript:;">' + v.res_name + '</a>';
                        //这里是添加所有的子菜单
                        content += loadchild(v);
                        content += '</li>';
                        $("#menu").append(content);
                    })
                    $('#layuiHeader').html(header)

                    element.init();

                    // 表头点击事件
                     $("#layuiHeader").on("click", 'li', function() {
                         // 表头添加样式
                        $.each($(this).siblings(), function (i, e) {
                            $(e).find("a").removeClass('layui-this')
                        });
                        $(this).find("a").addClass('layui-this');

                        // 侧边栏
                        let id = $(this).attr("id").split('_')[1];
                        console.log(id)
                        let newArr = res.filter( v => {
                            return v.id == id
                        })
                        // console.log(newArr[0])

                        $("#menu").html('');

                        newArr.forEach( v => {
                            var content = '<li class="layui-nav-item">';
                            content += '<a href="javascript:;">' + v.res_name + '</a>';
                            //这里是添加所有的子菜单
                            content += loadchild(v);
                            content += '</li>';
                            $("#menu").append(content);
                        })
                        element.init();

                    })
                });
            }
        })
    })

    //组装子菜单的方法
    function loadchild(obj) {
        if (obj == null) {
            return;
        }
        var content = '';
        if (obj.childMenus != null && obj.childMenus.length > 0) {
            content += '<dl class="layui-nav-child">';
        } else {
            content += '<dl>';
        }

        if (obj.childMenus != null && obj.childMenus.length > 0) {
            $.each(obj.childMenus, function (i, note) {
                content += '<dd>';
                content += '<a href="javascript:;" onclick="viewClick('+note.parent_res_id+')">' + note.res_name + '</a>';
                if (note.childMenus == null) {
                    return;
                }
                content += loadchild(note);
                content += '</dd>';
            });

            content += '</dl>';
        }
        console.log(content);
        return content;
    }

    // 侧边栏点击事件
    function viewClick(parent_res_id) {
        console.log(parent_res_id);
        $('#header_' + parent_res_id)
        $.each($('#header' + parent_res_id).siblings(), function (i, e) {
            $(e).find("a").removeClass('layui-this')
        });
        $('#header_' + parent_res_id).find("a").addClass('layui-this');
    }
</script>
